<template>
  <!-- 学习中心 -->
  <div class="wrap">
    
    <div class="con">
      <div class="tabLeft">
        <ul>
          <li :class="tabNum == 0 ? 'seleTabStuInfo pseudo' : 'tabStuInfo'" @click="tabSwitch(0)">基本信息</li>
          <li :class="tabNum == 1 ? 'seleTabReleaseTask pseudo' : 'tabReleaseTask'" @click="tabSwitch(1)">发布作业</li>
          <li :class="tabNum == 2 ? 'seleTabCheckTask pseudo' : 'tabCheckTask'" @click="tabSwitch(2)">检查作业情况</li>
        </ul>
      </div>
      <div class="tabRight">
        <div class="StuInfoCon" v-if="tabNum == 0">
          <h2>基本信息</h2>
          <span>姓名:</span>
          <p>张三</p>
          <span>联系方式:</span>
          <p>88888888888</p>
          <span>院校系:</span>
          <p>清华大学计算机系</p>
          <span>授课课程:</span>
          <p> <br /> <br /><br /><br /> <br /> </p>
        </div>
        <div class="ReleaseTask" v-if="tabNum == 1">
          <h2>发布作业</h2>
          <span>项目名称:</span>
          <p><br /></p>
          <span>截止时间:</span>
          <p>2019-09-30</p>
          <span>技术需求概述:</span>
          <p><br /> <br /> <br /><br /><br /> </p>
          <span>标准描述:</span>
          <p><br /><br /> <br /><br /><br /></p>
          <div>
            <el-button type="primary">发布</el-button>
          </div>
        </div>
        <div class="CheckTaskCon" v-if="tabNum == 2">
          <div class="checkHome" v-if="pageNum == 0">
            <h2>检查作业情况</h2>
            <span>学生姓名</span>
            <span>专业</span>
            <span>检查作业情况</span>
            <hr />
            <ul >
              <li v-for="(list,id) in stuLists" :key="id">
                  <p>{{list.name}}</p>
                  <p>{{list.professional}}</p>
                  <p class="liBtn"><el-button type="warning" @click="pageTurn(1)">查看</el-button></p>
                </li>
            </ul>
          </div>

          <div class="checkDetail" v-if="pageNum == 1">
            <h2>检查作业情况</h2>
            <span>项目名称</span>
            <span>截止日期</span>
            <span>作业进度</span>
            <span>项目评价</span>
            <hr />

            <ul>
              <li v-for="(detail,index) in detailLists" :key="detail.id">
                  <p>{{detail.name}}</p>
                  <p>{{detail.date}} </p>
                  <p>{{detail.speed}}</p>
                  <p :class="detail.access === '优' ? ' styleRed' : 'styleBlack'">{{detail.access}}</p>
                  <p class="liBtn">
                        <el-button type="warning" class="btn" v-if="detail.access === ''" @click="evalua(index)">点评</el-button>
                        <el-button type="danger" class="btn" v-else @click="evalua(index)">修改</el-button></p>
                </li>
            </ul>

            <!-- 修改评价 -->
            <el-dialog title="任务评价" :visible.sync="dialogFormVisible">
              <el-form :model="form" closed="xiugai">
                <el-form-item label="评价级别:" :label-width="formLabelWidth"> <br />

                  <div class="access">
                    <div class="access1">
                      <div class="accessBox" @click="hookaccess(0)"></div> 
                      <img src="../assets/hook.png" alt="" :class=" hook === 0 ? 'access1 hookExcellent' : 'access1 nonehook'">
                      <div class="you">{{tableAccess[0]}}</div>
                    </div>
                    <div class="access2" >
                      <div class="accessBox" @click="hookaccess(1)"></div>
                      <img src="../assets/hook.png" alt="" :class=" hook === 1 ? 'access1 hook2' : 'access1 nonehook'">
                      <div class="liang">{{tableAccess[1]}}</div>
                    </div>
                    <div class="access3" >
                      <div class="accessBox" @click="hookaccess(2)"></div>
                      <img src="../assets/hook.png" alt="" :class=" hook === 2 ? 'access1 hook3' : 'access1 nonehook'">
                      <div class="cha">{{tableAccess[2]}}</div>
                    </div>
                </div>
                </el-form-item>
                <el-form-item label="评语:" :label-width="formLabelWidth">
                  <br />
                  <p class="accessP">
                    <br />
                    <br />
                  </p>
                </el-form-item>
              </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="modify()">确 定</el-button>
              </div>
            </el-dialog>

            <div class="btnDiv">
              <el-button type="warning" @click="pageTurn(0)">返回上一级</el-button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  data() {
    return {
      rer: "",
      radio: " ",
      // 优良差评定
       hook: '',
       tableAccess: [
        '优','良','差'
      ],
      idx: null,
      dialogFormVisible: false,
      form: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: ""
      },
      formLabelWidth: "120px",
      tabNum: 0,
      pageNum: 0,
      stuLists: [
        { name: "12321321312", 
          professional: "12321321312321" 
        },
        { 
            name: "张三", 
            professional: "计算机专业" 
        },
        { 
            name: "张三", 
            professional: "计算机专业" 
        },
        {
             name: "张三", 
             professional: "计算机专业" 
        },
        { 
            name: "张三", 
            professional: "计算机专业" 
        },
        {
             name: "张三", 
             professional: "计算机专业" 
        },
        { 
            name: "张三", 
            professional: "计算机专业" 
        },
        { 
            name: "张三", 
            professional: "计算机专业" 
        },
        { 
            name: "张三", 
            professional: "计算机专业" 
        },
        { 
            name: "张三", 
            professional: "计算机专业" 
        },
        { 
            name: "张三", 
            professional: "计算机专业" 
        },
        { 
            name: "张三", 
            professional: "计算机专业"
        },
        { 
            name: "张三", 
            professional: "计算机专业" 
        },
        { 
            name: "张三", 
            professional: "计算机专业" 
        },
        { 
            name: "张三", 
            professional: "计算机专业" 
        }
      ],

      detailLists: [
        {
          id: 0,
          name: "建立购物网站",
          date: "2019-08-11",
          speed: "进行中",
          access: "优"
        },
        {
          id: 1,
          name: "建立购物网站",
          date: "2019-08-11",
          speed: "进行中",
          access: "优"
        },
        {
          id: 2,
          name: "建立购物网站",
          date: "2019-08-11",
          speed: "进行中",
          access: "优"
        },
        {
          id: 3,
          name: "建立购物网站",
          date: "2019-08-11",
          speed: "进行中",
          access: "优"
        },
        {
          id: 4,
          name: "建立购物网站",
          date: "2019-08-11",
          speed: "进行中",
          access: "优"
        },
        {
          id: 5,
          name: "建立购物网站",
          date: "2019-08-11",
          speed: "进行中",
          access: "优"
        },
        {
          id: 6,
          name: "建立购物网站",
          date: "2019-08-11",
          speed: "进行中",
          access: "优"
        },
        {
          id: 7,
          name: "建立购物网站",
          date: "2019-08-11",
          speed: "进行中",
          access: "优"
        },
        {
          id: 8,
          name: "建立购物网站",
          date: "2019-08-11",
          speed: "进行中",
          access: "优"
        },
        {
          id: 9,
          name: "建立购物网站",
          date: "2019-08-11",
          speed: "进行中",
          access: "优"
        },
        {
          id: 10,
          name: "建立购物网站",
          date: "2019-08-11",
          speed: "进行中",
          access: ""
        },
        {
          id: 11,
          name: "建立购物网站",
          date: "2019-08-11",
          speed: "进行中",
          access: "差"
        }
      ]
    };
  },
  

  methods: {
    tabSwitch(num) {
      this.tabNum = num;
    },
    pageTurn(num) {
      this.pageNum = num;
    },
    //点评事件
    evalua(index) {
      this.dialogFormVisible = true;
      this.idx = index;
    },

    // 修改评价
    modify() {
        this.dialogFormVisible = false;
        // console.log(this.radio);
         this.detailLists[this.idx].access = this.tableAccess[this.hook];

    },

    // 优良差按钮点击切换
    hookaccess(num) {
      this.hook = num
    }
  }
};
</script>

<style scoped>
.wrap {
  width: 100%;
  height: 100%;
}

.con {
  display: flex;
  width: 1200px;
  margin: 20px auto 0;
  box-shadow: 1px 3px 9px #ddd;
  border-radius: 10px;
}

.tabLeft li {
  position: relative;
  width: 210px;
  padding-left: 25px;
  line-height: 85px;
  font-size: 21px;
  color: #b3bdc9;
  text-align: center;
  list-style-type: none;
}

.tabRight {
  width: 100%;
  background-color: #fff;
}

.tabStuInfo {
  background: url("../assets/用户信息-1.png") 30px center no-repeat;
  background-size: 26px 28px;
}

.seleTabStuInfo {
  color: #0087cf !important;
  background: #fff url("../assets/用户信息.png") 30px center no-repeat;
  background-size: 26px 28px;
}

.tabReleaseTask {
  background: url("../assets/作业.png") 30px center no-repeat;
  background-size: 25px 30px;
}

.seleTabReleaseTask {
  color: #0087cf !important;
  background: #fff url("../assets/作业-1.png") 30px center no-repeat;
  background-size: 25px 30px;
}

.tabCheckTask {
  background: url("../assets/检查.png") 30px center no-repeat;
  background-size: 27px 27px;
}

.seleTabCheckTask {
  color: #0087cf !important;
  background: #fff url("../assets/检查-1.png") 30px center no-repeat;
  background-size: 27px 27px;
}

.pseudo::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0px;
  width: 8px;
  height: 85px;
  background-color: #0087cf;
}

.tabRight {
  padding: 30px 25px;
}

.tabRight h2 {
  font-weight: 500;
  font-size: 28px;
  margin-bottom: 18px;
}

.StuInfoCon span,
.ReleaseTask span {
  font-size: 23px;
  color: #5e5e5e;
  line-height: 50px;
}

.StuInfoCon p,
.ReleaseTask p {
  width: 300px;
  margin-bottom: 15px;
  padding: 0 20px;
  line-height: 50px;
  background-color: #f2f6f7;
  color: #5e5e5e;
}

.ReleaseTask div {
  float: left;
  margin-left: 12%;
}

hr {
  background-color: #0087cf;
  height: 3px;
}

.CheckTaskCon {
  width: 100%;
}

.checkHome span {
  display: inline-block;
  width: 32%;
  font-size: 23px;
  color: #0087cf;
  line-height: 35px;
  text-align: center;
}

.CheckTaskCon ul ,.CheckTaskCon li{
  width: 100%;
}

.checkHome ul li p{
  width: 31%;
  display: inline-block;
  line-height: 50px;
  font-size: 18px;
  text-align: center;
  margin-left: 1%;
}

.checkHome ul li .liBtn{
  width: 10%;
  display: inline-block;
  line-height: 50px;
  font-size: 18px;
  text-align: center;
  margin-left: 11%;
}


.checkDetail span {
  display: inline-block;
  width: 19%;
  font-size: 23px;
  color: #0087cf;
  line-height: 35px;
  text-align: center;
}

.checkDetail ul li p{
  width: 19%;
  display: inline-block;
  line-height: 50px;
  font-size: 18px;
  text-align: center;
  margin-left: 0%;
}

.checkDetail ul li .liBtn{
  width: 10%;
  display: inline-block;
  line-height: 50px;
  font-size: 18px;
  text-align: center;
  margin-left: 3%;
}


.checkDetail .btnDiv {
  float: right;
  margin-top: 2%;
}

.styleRed {
  color: #ff0000;
}

.styleBlack {
  color: #000;
}

.accessP {
  width: 100%;
  margin-bottom: 15px;
  height: 200px;
  background-color: #f2f6f7;
  color: #5e5e5e;
}



/* 优良差评价 */
  .access{
    position: relative;
    width: 100%;
    height: 50px;
  }
  .access1 {
    float: left;
    width: 150px;
    height: 50px;
    border-radius: 5px;
    margin-left: 0px;
    margin-top: 0px;
  }
  .access2 {
    float: left;
    width: 150px;
    height: 50px;
    border-radius: 5px;
    margin-top: 0px;
    margin-left: 0%;
  }
.access3 {
    float: left;
    width: 150px;
    height: 50px;
    border-radius: 5px;
    margin-left: 0px;
    margin-top: 0px;
  }

  .accessBox{
    position: relative;
    margin:15px 10px;
    width: 25px;
    height: 25px;
    background-color: #a4adb1;
    border-radius: 5px;
  }
  .hookExcellent{
    position: absolute;
    top: -8px;
    left: 5px;
    width: 50px;
    height: 50px;
  }
  .hook2{
    position: absolute;
    top: -8px;
    left: 154px;
    width: 50px;
    height: 50px;
  }
  .hook3{
    position: absolute;
    top: -8px;
    left: 305px;
    width: 50px;
    height: 50px;
  }

  .nonehook{
    display: none;
  }
  .you{
    position: absolute;
    font-size: 25px;
    top: 8px;
    left: 45px;
  }
  .liang{
    position: absolute;
    font-size: 25px;
    top: 8px;
    left: 195px;
  }
  .cha{
    position: absolute;
    font-size: 25px;
    top: 8px;
    left: 344px;
  }

</style>